﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tupian.aspx.cs" Inherits="css_huandingp_tupian" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
     <link type="text/css" rel="Stylesheet" href="css.css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
		   var currentIndex = 0;
            var DEMO; //函数对象
            var currentID = 0; //取得鼠标下方的对象ID
            var pictureID = 0; //索引ID
            $("#ifocus_piclist li").eq(0).show(); //默认
            autoScroll();
            $("#ifocus_btn li").hover(function() {
                StopScrolll();
                $("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式
                $(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式
                currentID = $(this).attr("id"); //取当前元素的ID
                pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
                $("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
                $("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
                $("#ifocus_tx li").hide();
                $("#ifocus_tx li").eq(pictureID).show();

            }, function() {
                //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
                currentID = $(this).attr("id"); //取当前元素的ID
                pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
                currentIndex = pictureID;
                autoScroll();
            });
            //自动滚动
            function autoScroll() {
                $("#ifocus_btn li:last").removeClass("current");
                $("#ifocus_tx li:last").hide();
                $("#ifocus_btn li").eq(currentIndex).addClass("current");
                $("#ifocus_btn li").eq(currentIndex - 1).removeClass("current");
                $("#ifocus_tx li").eq(currentIndex).show();
                $("#ifocus_tx li").eq(currentIndex - 1).hide();
                $("#ifocus_piclist li").eq(currentIndex).fadeIn("slow");
                $("#ifocus_piclist li").eq(currentIndex - 1).hide();
                currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex;
                DEMO = setTimeout(autoScroll, 2000);
            }
            function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
            {
                clearTimeout(DEMO);
            }
	});
    </script>
</head>
<body>

   <div id="confirm"></div>
   <!-- 区块一开始 -->
<div class="content1">
	<div class="top"></div>
	<div class="main cl">
		<!-- FLASH切换图开始 -->
		<div class="l_flash_pic">
			<div id="ifocus">
				<div id="ifocus_pic">
					<div id="ifocus_piclist" style="left:0; top:0;">
						<ul>
                        <!--正常显示图-->
							<li><a href="../../ReadNews.aspx?ID=<%=Sid1 %>" target="_blank"><img src="../<%=image1 %>" alt="<%=imageName1 %>" /></a></li>
							<li><a href="../../ReadNews.aspx?ID=<%=Sid2 %>" target="_blank"><img src="../<%=image2 %>" alt="<%=imageName2 %>" /></a></li>
							<li><a href="../../ReadNews.aspx?ID=<%=Sid3 %>" target="_blank"><img src="../<%=image3 %>" alt="<%=imageName3 %>" /></a></li>
							<li><a href="../../ReadNews.aspx?ID=<%=Sid4 %>" target="_blank"><img src="../<%=image4 %>" alt="<%=imageName4 %>" /></a></li>
						</ul>
					</div>
					<div id="ifocus_opdiv"></div>
					<div id="ifocus_tx">
						<ul>
                        <!--底部说明-->
							<li class="current"><%=content1 %></li>
							<li class="normal"><%=content2 %></li>
							<li class="normal"><%=content3 %></li>
							<li class="normal"><%=content4 %></li>
						</ul>
					</div>
				</div>
				<div id="ifocus_btn">
					<ul>
                    <!--右边小图-->
						<li class="current" id="p0"><img src="../<%=image1 %>" alt="<%=imageName1 %>" /></li>
						<li id="p1"><img src="../<%=image2 %>" alt="<%=imageName2 %>" /></li>
						<li id="p2"><img src="../<%=image3 %>" alt="<%=imageName3 %>" /></li>
						<li id="p3"><img src="../<%=image4 %>" alt="<%=imageName4 %>" /></li>
					</ul>
				</div>
			</div>	
		</div>
		<!-- FLASH切换图结束 -->
	</div>
</div>
<!-- 区块一结束 -->
</body>
</html>
